<template>
    <el-main style="height: 100%;">
        <div style="width: 700px;padding: 10px 10px; display: flex;">
          <el-input v-model="name" placeholder="请输入名称" suffix-icon="el-icon-search" style="margin-right: 10px;"></el-input>
          <el-input v-model="description" placeholder="请输入描述" suffix-icon="el-icon-message" style="margin-right: 10px;"></el-input>
          <el-button @click="search(this)">搜索</el-button>
          <el-button type="warning" @click="reset(this)">重置</el-button>
        </div>
         
        <div style="width: 700px;padding: 10px 10px; display: flex;">
          <el-button type="primary" @click="dialogFormVisible=true">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
          <el-button type="primary" @click="test">测试 <i class="el-icon-circle-plus-outline"></i></el-button>
        </div>
        <el-table :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="ID" :disabled="true"></el-table-column>
          <el-table-column prop="name" label="名称" ></el-table-column>
          <el-table-column prop="description" label="描述" ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="warning" round @click="selectMenu(scope.row.id)">分配菜单 <i class="el-icon-edit"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="pages"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 表单弹窗 -->
<el-dialog title="信息增加/修改" :visible.sync="dialogFormVisible">
  <el-form :model="form" label-width="70px">
    <el-form-item label="名称" >
      <el-input v-model="form.username" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="描述" >
      <el-input v-model="form.nickname" auto-complete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleAction">确 定</el-button>
  </div>
</el-dialog>
    <!-- 表单弹窗 -->
    <el-dialog title="分配菜单" :visible.sync="dialogFormVisible2">
        <el-tree
        :props="props"
        :default-expanded-keys="expendArr"
        node-key="id"
        :default-checked-keys="checkArr"
        :data="MenuData"
        show-checkbox
        ref="tree"
        >
        </el-tree>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="handleAction2">确 定</el-button>
  </div>
</el-dialog>
  </el-main>
</template>

<script>
import {loadMyMessage,addMenuRole,showMenuRole} from "@/api/role"
import {loadMyMessage as loadMenuMessage} from "@/api/menu"
export default {
    data() {
    return {
      pages:[4,6,8,10],
      tableData: null,
      total:0,
      pageIndex:1,
      pageSize:4,
      name:"",
      description:"",
      dialogFormVisible:false,
      dialogFormVisible2:false,
      form:{},
      MenuData:[],
      props:{
        label:"name"
      },
      expendArr:[],
      checkArr:[],
      roleId:""
    }
  },
  created(){
    this.loadMessage()
  },
  methods:{
    handleSelectionChange(val){
    this.multipleSelection=val
  },
    handleSizeChange(changeSize){
      this.pageSize=changeSize
      this.loadMessage()
    },
    handleCurrentChange(chageIndex){
      this.pageIndex=chageIndex
      this.loadMessage()
    },
    handleAction(){
        this.dialogFormVisible=false
    },
    async loadMessage(){
        const res=await loadMyMessage(this.pageSize,this.pageIndex,this.name,this.description)
        this.tableData=res.data.result
        this.total=res.data.total
        this.name=""
        this.description=""
    },
    search(){
        this.loadMessage()
    },
    reset(){
        this.name=""
        this.description=""
    },
    async selectMenu(roleId){
        this.dialogFormVisible2=true
        const res=await loadMenuMessage()
        this.MenuData=res.data.result
        //将里面的id解析出来
        this.expendArr=this.MenuData.map(m=>m.id)
        this.roleId=roleId
        const res2=await showMenuRole(roleId)
        const ids=this.handleMenu(this.MenuData)
        const resIds=this.handleIds(res2.data.result,ids)
        this.checkArr=resIds
    },
    async handleAction2(){
      //得到选择的id数组
      const ids=this.$refs.tree.getCheckedKeys()
      console.log(ids)
      const res=await addMenuRole(this.roleId,ids)
      console.log(res)
      this.dialogFormVisible2=false;
      this.roleId=""
    },
    handleMenu(data){
      const ids = [];
  for (let i = 0; i < data.length; i++) {
    const item = data[i]; 
    if (item.children && item.children.length > 0) {
      ids.push(item.id);
    }
    if (item.children && item.children.length > 0) {
      const childIds = this.handleMenu(item.children);
      ids.push(...childIds);
    }
  }
  return ids;
    },
    handleIds(idArray,ids){
      for (let i = 0; i < ids.length; i++) {
      const id = ids[i];
      const index = idArray.indexOf(id);
      if (index !== -1) {
      idArray.splice(index, 1);
      }
    }
    return idArray
    },
    test(){
      const idArray=[1,4,7,8,2]
      const ids=this.handleMenu(this.MenuData)
      console.log(ids)
  console.log(idArray)
    }
  }

}
</script>

<style>

</style>